<!-- 天气信息展示组件 -->
 <!-- components/ui/WeatherWidget.vue -->
<template>
    <div class="bg-white rounded-xl shadow-md p-4">
      <h3 class="text-lg font-semibold mb-4">天气信息</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <!-- 当日天气 -->
        <div class="text-center p-3 bg-blue-50 rounded-lg">
          <font-awesome-icon icon="sun" class="text-3xl text-yellow-500 mb-2" />
          <p class="font-medium">当前天气</p>
          <p class="text-2xl">25°C</p>
          <p class="text-gray-600 text-sm">晴朗</p>
        </div>
  
        <!-- 预报天气 -->
        <div 
          v-for="day in forecast"
          :key="day.day"
          class="text-center p-3 bg-white hover:bg-blue-50 rounded-lg transition-colors"
        >
          <font-awesome-icon :icon="day.icon" class="text-2xl mb-2" :class="day.iconColor" />
          <p class="text-gray-600 text-sm mb-1">{{ day.day }}</p>
          <p class="font-medium">{{ day.temp }}</p>
          <p class="text-gray-600 text-sm">{{ day.condition }}</p>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const forecast = ref([
    { day: '周二', icon: 'cloud-sun', temp: '23°C', condition: '多云', iconColor: 'text-blue-400' },
    { day: '周三', icon: 'cloud-showers-heavy', temp: '20°C', condition: '小雨', iconColor: 'text-gray-500' },
    { day: '周四', icon: 'cloud', temp: '22°C', condition: '阴天', iconColor: 'text-gray-400' }
  ])
  </script>